<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pingpong测试</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-3.5.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Pingpong</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#" id="main-page">主页</a></li>
                        <li><a href="#" id="settings-page">设定</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid" id="main-page-view">
            <div class="jumbotron text-center">
                <h1>启动Pingpong测试</h1>
                <p>
                    测试C++网络库性能，目前支持boost::asio和QtNetwork。
                    开始测试后，客户端将向服务端发送预先设定的数据，服务端收到后返回，客户端收到后再返回，如此反复直到设定时常。
                    一次数据来回记作一次，将自动测试不同的客户端和服务端组合，并显示结果。
                </p>
                <div>
                    <a href="#" id="start-test-button" class="btn btn-lg btn-success" role="button">开始测试</a>
                </div>
            </div>
            <div>
                <div class="progress">
                    <div id="test-progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%; min-width: 2em;">
                        0%
                    </div>
                </div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Asio client</th>
                            <th>Qt client</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Asio server</th>
                            <th id="asio-server-asio-client"></th>
                            <th id="asio-server-qt-client"></th>
                        </tr>
                        <tr>
                            <th>Qt server</th>
                            <th id="qt-server-asio-client"></th>
                            <th id="qt-server-qt-client"></th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <h3>系统信息</h3>
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="system-information-label">系统版本</div>
                    <div id="system_version"></div>
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="system-information-label">处理器</div>
                    <div id="cpu_information"></div>
                </div>
                <div class="col-md-4 col-lg-4">
                    <div class="system-information-label">内存</div>
                    <div id="system_memory"></div>
                </div>
            </div>
        </div>
        <div class="container-fluid" id="settings-page-view">
            <div class="row row-vertical-center row-spacing-16px">
                <div class="col-md-2 col-lg-2 col-md-offset-3">
                    测试时间
                </div>
                <div class="col-md-4 col-lg-4 input-group">
                    <input type="number" name="test-time-number" id="test-time-number" class="form-control" min="1" max="20">
                    <span class="input-group-addon">S</span>
                </div>
            </div>
            <div class="row row-vertical-center row-spacing-16px">
                <div class="col-md-2 col-lg-2 col-md-offset-3">
                    发送数据
                </div>
                <div class="col-md-4 col-lg-4 input-group">
                    <input type="text" name="send-data-text" id="send-data-text" class="form-control">
                </div>
            </div>
        </div>
    </div>
</body>
</html>